<template>
    <!-- 用户中心-项目发布-项目查看 -->
    <div class="container mb-40">
        <Breadcrumb :list="['用户中心']" />
        <div class="main">
            <div class="nav">
                <el-card class="box-card" body-style="padding:10px 0">
                    <div v-for="(item, index) in navArr" :key="index" class="text item" @click.native="clickNav(index)"
                        :class="index == dynamic ? 'active' : ''"><a>{{ item }}</a></div>
                </el-card>
            </div>
            <div class="detail">
                <div class="title">
                    <div class="a"></div>
                    <span>项目承接单位（<span style="color:red">5</span>家）</span>
                    <el-button  class="btn">返回</el-button>
                </div>
                <div class="content">
                    <el-table :data="tableData" style="width: 100%" row-class-name="rows">
                        <el-table-column type="index" label="序号" width="60" />
                        <el-table-column prop="name" label="单位名称" width="250" />
                        <el-table-column prop="address" label="地址" width="320"/>
                        <el-table-column prop="contact" label="联系人" width="80"/>
                        <el-table-column prop="phone" label="联系电话" />
                      </el-table>
                </div>
                <div class="title">
                    <div class="a"></div>
                    <span>项目详情</span>
                </div>
                <el-card class="box-card2" shadow="never">
                    <h1>智能营业厅解决方案</h1>
                    <img src="@/assets/images/floor_b.png" alt="">
                    <div class="info">
                        项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容。      项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容项目文字描述内容。
                    </div>
                  </el-card>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import Breadcrumb from '@/components/Breadcrumb.vue';
import { ref } from 'vue';
const dynamic = ref(0)
const navArr = ref(["基本信息", "修改密码", "项目发布", "项目承接", "我的动态", "组织风采"])
const clickNav = (index:any) => {
    dynamic.value = index;
}
const tableData = [
  {
    name: '单位名称单位名称单位名称单位名',
    address: '地址地址地址地址地址地址地址地址地址地址',
    contact:"张女士",
    phone:"13888888888"
  },
  {
    name: '单位名称单位名称单位名称单位名',
    address: '地址地址地址地址地址地址地址地址地址地址',
    contact:"张女士",
    phone:"13888888888"
  },
  {
    name: '单位名称单位名称单位名称单位名',
    address: '地址地址地址地址地址地址地址地址地址地址',
    contact:"张女士",
    phone:"13888888888"
  },
  {
    name: '单位名称单位名称单位名称单位名',
    address: '地址地址地址地址地址地址地址地址地址地址',
    contact:"张女士",
    phone:"13888888888"
  },
  {
    name: '单位名称单位名称单位名称单位名',
    address: '地址地址地址地址地址地址地址地址地址地址',
    contact:"张女士",
    phone:"13888888888"
  },
]
</script>

<style scoped lang="less">
@import "@/assets/style/common.less";
.main {
    overflow: hidden;
    .nav {
        float: left;
        .text {
            font-size: 18px;
            line-height: 60px;
            color: #222222;
        }

        .item {
            height: 60px;
            text-align: center;
            align-items: center;
        }

        .box-card {
            width: 196px;

            div.active{
                background-color:#009CF2 ;
            }
        }
    }

    .detail {
        width: 900px;
        float: right;
        background: #FFFFFF;
        padding: 0 40px 40px 40px;
        .title {
            padding: 40px 0 22px 0;

            span {
                font-size: 24px;
                line-height: 30px;
            }
            position: relative;
            .a {
                width: 6px;
                height: 24px;
                line-height: 48px;
                background: #009CF2;
                position: absolute;
                top: 45px;
                left: -12px;
              }

            .btn {
                float: right;
            }
        }
        .content{
            font-size: 14px;
            color: #222222;
            line-height: 50px;
            :deep(.el-table){
                --el-table-header-bg-color: #EEEEEE !important;

            }
            :deep(.el-table .el-table__cell){
                text-align: center;
            }
            :deep(.el-table--fit){
                border-left: 1px solid #EEEEEE;
                border-right: 1px solid #EEEEEE;

            }
        }
        .box-card2{
            padding: 10px 0;
            h1{
                font-size: 38px;
                line-height: 40px;
                text-align: center;
            }
            img{
                width: 720px;
                height: 460px;
                display: block;
                padding: 32px 60px;
            }
            .info{
                width: 856px;
                font-size: 20px;
                line-height: 32px;
                text-indent:2em;
            }
        }
    }
}
</style>